<template>
  <div class="app-container">
    <el-button   class="filter-item marginRB10" type="primary" icon="el-icon-plus" @click="handleCreate()">添加</el-button>
    <el-button class="marginRB10" type="danger" @click="allDel()" plain>批量删除</el-button>

    <el-table ref="dataList" :data="menuList" style="margin-bottom: 20px;" row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="id" > </el-table-column>
      <el-table-column prop="name" label="名字" > </el-table-column>
      <el-table-column prop="price" label="价格" > </el-table-column>
      <el-table-column prop="renew" label="续费" > </el-table-column>
      <el-table-column prop="rebate" label="返利" > </el-table-column>
      <el-table-column prop="head_picture" label="图片" >
        <template slot-scope="scope">
          <el-popover placement="right" max-width="220" trigger="hover">
            <img :src="scope.row.head_picture" alt="" style="max-width: 200px;max-height: 200px">
            <img slot="reference" :src="scope.row.head_picture" alt="" style="width: 50px;">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="moods" label="进场人气加成" > </el-table-column>
      <el-table-column prop="ratio" label="经验加速%" > </el-table-column>
      <el-table-column prop="image" label="图片" >
        <template slot-scope="scope">
          <el-popover placement="left" width="220" trigger="hover">
            <img :src="scope.row.image" alt="" style="max-width: 200px;max-height: 200px">
            <img slot="reference" :src="scope.row.image" alt="" style="height: 25px">
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column min-width="180" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)" plain>编辑</el-button>
          <cus-del-btn @ok="handleDelete(scope.row)"></cus-del-btn>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-dialogDrag :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible" @close="handleDialogClose">
      <el-form ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="120px" style="width: 400px; margin: 0 auto;">
        <el-form-item label="名字" prop="name">
          <el-input v-model="form.name" placeholder="请输入名字"/>
        </el-form-item>
        <el-form-item label='价格' prop="price">
          <el-input v-model="form.price" placeholder="请输入价格"/>
        </el-form-item>
        <el-form-item label="续费" prop="renew">
          <el-input v-model="form.renew" placeholder="请输入续费"/>
        </el-form-item>
        <el-form-item label='返利' prop="rebate">
          <el-input v-model="form.rebate" placeholder="请输入返利"/>
        </el-form-item>
        <el-form-item label='爵位图片' prop="head_picture">
          <span>{{form.head_picture?form.head_picture.name:''}}</span>
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="进场人气加成" prop="moods">
          <el-input v-model="form.moods" placeholder="请输入进场人气加成"/>
        </el-form-item>
        <el-form-item label='经验加速%' prop="ratio">
          <el-input v-model="form.ratio" placeholder="请输入经验加速"/>
        </el-form-item>
        <el-form-item label='爵位图片' prop="image">
          <span>{{form.image?form.image.name:''}}</span>
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-success="handleAvatarSuccess2"
            :before-upload="beforeAvatarUpload2">
            <el-button type="primary">上传图片</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="submitForm()">
          确 认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { saveData, deleteData,  updateData, listData } from '@/api/title/nobility'
  export default {
    data() {
      return {
        listLoading: true,
        total: 0,
        listQuery: {
          page: 1,
          perPage: 10
        },
        menuList: [],
        dialogFormVisible: false,
        dialogStatus: '',
        titleMap: {
          update: '编辑',
          create: '增加'
        },
        form: {
          id: undefined,
          name: undefined,
          price: undefined,
          renew: undefined,
          rebate: undefined,
          head_picture: undefined,
          moods: undefined,
          ratio: undefined,
          image: undefined,
        },
        rules: {
          name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
          price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
          renew: [{ required: true, message: '请输入续费', trigger: 'blur' }],
          rebate: [{ required: true, message: '请输入返利', trigger: 'blur' }],
          head_picture: [{ required: true, message: '请输入头像框图片', trigger: 'blur' }],
          moods: [{ required: true, message: '请输入进场人气加成', trigger: 'blur' }],
          ratio: [{ required: true, message: '请输入经验加速', trigger: 'blur' }],
          image: [{ required: true, message: '请输入爵位图片', trigger: 'blur' }],
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      handleAvatarSuccess(res, file) {
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;


        this.form.head_picture = file
        // return isJPG && isLt2M;
      },
      handleAvatarSuccess2(res, file) {
      },
      beforeAvatarUpload2(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;


        this.form.image = file
        // return isJPG && isLt2M;
      },
      getList() {
        this.listLoading = true
        listData().then(response => {
          this.menuList = response.data
          this.listLoading = false
        })
      },
      handleCreate(row) {
        this.resetForm()
        this.dialogStatus = 'create'
        this.dialogFormVisible = true
      },
      handleUpdate(row) {
        this.form = []
        this.form.id= row.id
        this.form.name= row.name
        this.form.price= row.price
        this.form.renew= row.renew
        this.form.rebate= row.rebate
        this.form.head_picture= row.head_picture
        this.form.moods= row.moods
        this.form.ratio= row.ratio
        this.form.image= row.image

        this.dialogStatus = 'update'
        this.dialogFormVisible = true

        this.form = Object.assign({}, this.form)
      },
      handleDelete(row) {
        let data = {ids:row.id}
        deleteData(data).then(response => {
          if (response.code === 200) {
            this.getList()
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          }
        })
      },
      allDel(){

        let delNum = []
        this.$refs.dataList.selection.forEach((k) => { delNum.push(k.id) })
        if(delNum.length === 0){return;}
        let data = {ids:delNum.toString()}
        deleteData(data).then(response => {
          if (response.code === 200) {
            this.getList()
            this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
          }
        })
      },
      submitForm() {
        this.$refs['dataForm'].validate(valid => {
          if (valid && this.dialogStatus === 'create') {
            let formData = new FormData();
            for(let item in this.form){this.form[item] === undefined? '':formData.append(item, this.form[item]);}
            saveData(formData).then(response => {
              if (response.code === 200) {
                this.getList()
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogFormVisible = false
              } else {
                this.$message({
                message: response.message,
                type: 'error'
            });
              }
            })
          }else if(valid && this.dialogStatus === 'update'){
            let formData = new FormData();
            for(let item in this.form){this.form[item] === undefined? '':formData.append(item, this.form[item]);}
            updateData(formData).then(response => {
              if (response.code === 200) {
                this.getList()
                this.$notify({
                    type:'success',
                    message: '操作成功',
                    position: 'bottom-right',
                    showClose: false,
                    duration: 3000
                });
                this.dialogFormVisible = false
              } else {
                this.$message({
                message: response.message,
                type: 'error'
            });
              }
            })
          }
        })
      },
      resetForm() {
        this.form = {
          id: undefined,
          name: undefined,
          price: undefined,
          renew: undefined,
          rebate: undefined,
          head_picture: undefined,
          moods: undefined,
          ratio: undefined,
          image: undefined,
        }
      },
      // 监听dialog关闭时的处理事件
      handleDialogClose() {
        if (this.$refs['dataForm']) {
          this.$refs['dataForm'].clearValidate() // 清除整个表单的校验
        }
      }
    }
  }
</script>
